import { useRef } from "react";
/**
 * 获取DOM元素
 * 【说明】：在React组件中获取/操作DOM，可以通过useRef()钩子函数
 * 【步骤】：创建useRef对象，与DOM元素进行绑定、并通过ref.current 获取DOM
 * 【注意】：DOM可用时是指，只有在页面中的DOM元素渲染完毕时才可使用
 */
function Dom() {
  // 导入useRef钩子函数，并创建ref对象
  const DivRef = useRef(null)

  // 创建事件、通过点击获取DOM元素
  const btnClick = () => {
    console.log(DivRef);
    DivRef.current.innerHTML = "<button>Hello Button</button>"
  }
  return (
    // 在DOM元素中 通过ref属性与useRef对象进行绑定
    <div ref={DivRef}>
      <button onClick={btnClick}>按钮</button>
    </div>
  )
}

export default Dom